<template>
  <div class="lesson-page">
    <g-empty v-if="!loading && list.length === 0" />
    <template v-else>
      <article-card
        v-for="item in list"
        :key="item.id"
        v-bind="item"
        @click="onArticleClick(item)"
      />
      <div v-if="finished" class="g-divider">没有更多了</div>
    </template>
  </div>
</template>

<script>
import { getArticles } from "./api";
import ArticleCard from "@/components/ArticleCard.vue";
import loadMoreMixin from "@/mixins/loadMoreMixin";
import Taro from "@tarojs/taro";

export default {
  components: {
    ArticleCard
  },
  mixins: [loadMoreMixin],
  data() {
    return {
      list: []
    };
  },
  onLoad(options) {
    this.type = options.type;
    this.typeName = options.typeName;
    this.loadMore();
  },
  methods: {
    async loadMore() {
      this.loading = true;
      const data = await getArticles({
        ...this.page,
        type: this.type,
        typeName: this.typeName
      });
      this.list = data;
      // .concat(data);
      // this.finished = list.length < this.page.limit;
      // this.loading = false;
    },
    onArticleClick(item) {
      Taro.navigateTo({
        url: "/pages/lesson/artDetail?id=" + item.id + "&type=" + this.type
      });
    }
  }
};
</script>

<style lang="less">
@import "./index.less";
</style>
